<template>
    <el-dialog title="出库" :visible.sync="dialogVisible" width="65%" :before-close="handleClose">
        <div v-if="carList.length == 1" class="mb-20">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">详情</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-row :gutter="24" class="info-row">

                <el-col :span="8">
                    供应商名称：<span>{{carList[0].sellerName}}</span>
                </el-col>
                <el-col :span="8">
                    手机号：<span>{{carList[0].sellerPhone}}</span>
                </el-col>
                <el-col :span="8">
                    状态：<span>待出库</span>
                </el-col>
                <el-col :span="8">
                    车架号：<span>{{carList[0].carVin}}</span>
                </el-col>
            </el-row>
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">车辆出入库记录</el-col>
            </el-row>
            <el-divider></el-divider>
            <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="carLogList" v-loading="loading">
                <el-table-column label="时间" align="center" prop="">
                    <template slot-scope="scope">
                        {{ scope.row.timeCreate | dateYMDHMSFormat }}
                    </template>
                </el-table-column>
                <el-table-column label="仓库名称" align="center" prop="storeName" />
                <el-table-column label="记录" align="center">
                    <template slot-scope="scope">
                        {{ typeList[scope.row.type]}}
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto">
            <el-row :gutter="24" class="info-row">
                <el-col :span="24" class="detailsTitle mb-0">出库信息</el-col>
            </el-row>
            <el-divider></el-divider>
            <c-form-template lable="">
                <el-col :span="8">
                    <el-form-item label="出库类型" prop="name">
                        <el-select v-model="type " placeholder="请选择" class="wh flex-1 mr-lg">
                            <el-option label="临时出库" value="0"></el-option>
                            <el-option label="出库" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8" v-if="type == 1">
                    <el-form-item label="出库日期" prop="name">
                        <el-date-picker v-model="timeOut" format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择出库日期"></el-date-picker>
                    </el-form-item>
                </el-col>
            </c-form-template>
        </el-form>
        <el-table :header-cell-style="{ background: '#F1F1F1', color: '#092132' }" :data="carList" v-loading="loading">
            <el-table-column label="车辆信息" align="center" prop="">
                <template slot-scope="scope">
                    {{scope.row.carBrand}}-{{scope.row.carSeries}}-{{scope.row.carModel}}
                </template>
            </el-table-column>
            <el-table-column label="车架号" align="center" prop="carVin" />
            <el-table-column label="供应商名称" align="center" prop="sellerName" />
        </el-table>
        <span slot="footer">
            <el-button :loading="loading" @click="handleClose">取 消</el-button>
            <el-button :loading="loading" type="primary" @click="handleSubmit">确定出库</el-button>
        </span>
    </el-dialog>
</template>
<script>
export default {
    data () {
        return {
            dialogVisible: false,
            loading: false,
            carList: "",
            ruleForm: {},
            rules: {},
            type: "",
            timeOut: "",
            carLogList: [],
            typeList: ["入库", "出库", "临时入库", "临时出库"]
        };
    },
    methods: {
        handleSubmit () {
            if (this.type == "") {
                this.$message.warning("请选择出库类型");
                return false;
            }
            this.$confirm("是否确认此操作?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                let idList = [];
                this.carList.forEach((item) => {
                    idList.push(item.id)
                })
                let data;
                let url = "";
                switch (this.type) {
                    case "1":
                        url = '/storeCar/outStore'
                        data = {
                            idList: idList,
                            timeOut: this.timeOut
                        }
                        break;
                    case "0":
                        url = '/storeCar/tempOutStore'
                        data = idList
                }
                this.loading = true;


                this.$post({
                    url: url,
                    data,
                }).then(
                    () => {
                        this.$message.success("操作成功");
                        this.handleClose();
                        this.$parent.$parent.tableList();
                        this.loading = false;
                    },
                    () => {
                        this.loading = false;
                    }
                );
            });

        },
        handleOpen (list) {
            if (list) {
                this.carList = list
                this.ruleForm = {};
                if (list.length == 1) {
                    this.$get({
                        url: "/storeCar/getById?id=" + list[0].id,
                    }).then((res) => {
                        console.log(1);
                        console.log(res);
                        this.carLogList = res.carLogList
                        this.loading = false;
                    });
                }

            }
            this.dialogVisible = true;
            this.loading = false;
        },
        handleClose () {
            this.ruleForm = {
                address: [],
            };
            this.$refs.ruleForm.resetFields();
            this.dialogVisible = false;
        },
    },
};
</script>
